<template>
  <view class="app-container">
    <view class="title-padding"></view>

    <view class="generate-numbers-card">
      <view class="title-row flex justify-between">
        <view class="tool-left">
          生成号码
          <view class="tool-left-small">/{{ numberList.length }}注</view>
        </view>
        <view class="tool-right">
          <button @tap="handleCopyData" class="cu-btn bg-blue text-white">
            复制
          </button>
        </view>
      </view>
      <scroll-view scroll-y="true" class="scroll-h">
        <view class="content-row grid col-2" v-if="numberList.length > 0">
          <view
            class="numbers-container flex justify-center"
            v-for="(numbers, index) in numberList"
            :key="index"
          >
            <view class="numbers-item flex">
              <view
                class="number-item"
                v-for="(number, idx) in numbers"
                :key="idx"
              >
                {{ (number + '').padStart(2, '0') }}
              </view>
            </view>
          </view>
        </view>
        <view class="empty-container flex align-center justify-center" v-else>
          <view class="empty">
            <image mode="widthFix" src="../../static/empty.png" />
          </view>
          <view class="label">
            暂时没有号码
          </view>
        </view>
      </scroll-view>

      <view class="footer-row flex justify-between">
        <button @tap="handleCleanUpTop" class="cu-btn text-blue">
          清除
        </button>

        <view class="right-area">
          <button @tap="handleReverseData" class="cu-btn text-blue">
            反向
          </button>
          <button @tap="handlePasteData" class="cu-btn text-blue">粘贴</button>
        </view>
      </view>
    </view>

    <view class="number-analysis">
      <view class="number-analysis-header">
        <text class="text">号码分析</text>
        <view class="desc-container">
          <picker
            mode="multiSelector"
            @columnchange="onCateChange"
            :value="cateChooseList"
            :range="cpCategoryList"
            range-key="name"
          >
            <view class="flex align-center">
              <view>
                {{ cpCategoryList[0][cateChooseList[0]].name }}
                {{ cpCategoryList[1][cateChooseList[1]].name }}
              </view>
              <view class="picker-suffix-icon">
                <image mode="widthFix" src="../../static/form/choose.png" />
              </view>
            </view>
          </picker>
        </view>
      </view>
      <view class="number-analysis-info">
        <view class="number-analysis-info-title data-statistics">数据统计</view>
        <view class="number-analysis-info-table flex justify-between">
          <view class="table-item">
            <text class="top">实出</text>
            <text class="bottom">{{ chu }}</text>
          </view>
          <view class="table-item">
            <text class="top">差值</text>
            <text class="bottom">{{ cha }}</text>
          </view>
          <!-- <view class="table-item">
            <text class="top">回补几率</text>
            <text class="bottom">1.33</text>
          </view>
          <view class="table-item">
            <text class="top">投资价值</text>
            <text class="bottom">0.3</text>
          </view>-->
          <view class="table-item">
            <text class="top">当前遗漏</text>
            <text class="bottom">{{ cur }}</text>
          </view>
          <view class="table-item">
            <text class="top">最大遗漏</text>
            <text class="bottom">{{ max }}</text>
          </view>
        </view>
        <view class="number-analysis-info-title">趋势图</view>
        <base-k-card v-if="yilouk" :kData="yilouk" :index="0"></base-k-card>
        <view class="number-analysis-info-title">遗漏图</view>
        <omission v-if="mData" :mData="mData"></omission>
      </view>
    </view>
  </view>
</template>

<script>
import TitleBar from '@/components/title-bar/title-bar.vue'
import HoldBackCard from '@/components/hold-back-card/hold-back-card.vue'
import BaseKCard from '@/components/loveableKCard/base.vue'
// import CCard from '@/components/loveableKCard/ccard.vue'
import Omission from '@/components/loveableKCard/omission.vue'
import { getCaipiaoCategoryList } from '@/api/common'
import { getOmissionAnalysis } from '@/api/number'
import { generateZuhao2 } from '@/api/number'

export default {
  components: {
    TitleBar,
    HoldBackCard,
    BaseKCard,
    Omission,
  },
  created() {},
  data() {
    return {
      numberList: [],
      listQuery: {
        caipiao_id: null,
        qishu: null,
      },
      qishu: 0,
      yilou: null,
      yilouk: null,
      yilouC: null,
      mData: null,
      chu: 0,
      max: 0,
      cha: 0,
      cur: 0,
      cateChooseList: [0, 0],
      cpCategoryList: [
        [
          {
            name: '江苏',
            id: '1',
          },
        ],
        [
          {
            name: '50期',
            id: 50,
          },
        ],
      ],
    }
  },
  methods: {
    onCateChange(e) {
      this.$set(this.cateChooseList, e.detail.column, e.detail.value)
      this.listQuery.caipiao_id = this.cpCategoryList[0][
        this.cateChooseList[0]
      ].id
      this.listQuery.qishu = this.cpCategoryList[1][
        this.cateChooseList[1]
      ].value
      this.getAnalysis()
    },
    getCateList() {
      getCaipiaoCategoryList().then(res => {
        if (res.code === 1 && res.data) {
          let resList = []
          resList = res.data.map(data => {
            return {
              id: data.c_id,
              name: data.c_name,
            }
          })
          this.$set(this.cpCategoryList, 0, resList)
          this.$set(this.cpCategoryList, 1, [
            { value: 50, name: '50期' },
            { value: 100, name: '100期' },
            { value: 200, name: '200期' },
            { value: 400, name: '400期' },
            { value: 1000, name: '1000期' },
            { value: 2000, name: '2000期' },
            // { value: 5000, name: '5000期' },
          ])
          this.listQuery.caipiao_id = this.cpCategoryList[0][
            this.cateChooseList[0]
          ].id
          this.listQuery.qishu = this.cpCategoryList[1][
            this.cateChooseList[1]
          ].value
          this.getAnalysis()
        } else {
          uni.showToast({
            title: res.msg,
            icon: 'none',
          })
        }
      })
    },
    getAnalysis() {
      if (this.numberList.length === 0) {
        return
      }
      getOmissionAnalysis({
        ...this.listQuery,
        haoma: JSON.stringify(this.numberList),
      }).then(res => {
        if (res.code === 1 && res.data) {
          this.chu = res.data.arrStat.yilou
          this.cha = res.data.arrStat.cha
          this.cur = res.data.arrStat.cur
          this.max = res.data.arrStat.max
          this.yilouk = res.data.yilouK
          this.yilouC = res.data.yilouC
          this.yilou = res.data.yilou
          this.mData = {
            categories: res.data.yilouC.map(item => `${item.qihao}`),
            series: [
              {
                name: '',
                data: res.data.yilouC.map(item => item.quantity),
              },
            ],
          }
        } else {
          uni.showToast({
            title: res.msg,
            icon: 'none',
          })
        }
      })
    },
    handleCleanUpTop() {
      this.numberList = []
      this.chu = 0
      this.cha = 0
      this.cur = 0
      this.max = 0
      this.yilouk = null
      this.yilouC = null
      this.yilou = null
      this.mData = null
    },
    handleReverseData() {
      let params = uni.getStorageSync('generatedParams')
        ? JSON.parse(uni.getStorageSync('generatedParams'))
        : {}
      if (uni.getStorageSync('is_reverse') == '1') {
        params.is_reverse = 0
        uni.setStorageSync('is_reverse', '0')
      } else {
        params.is_reverse = 1
        uni.setStorageSync('is_reverse', '1')
      }

      generateZuhao2(params).then(res => {
        if (res.code === 1 && res.data) {
          this.numberList = res.data.list
        } else {
          uni.showToast({
            title: res.msg,
            icon: 'none',
          })
        }
      })
    },
    handleCopyData() {
      let copyData = this.numberList.map(arr =>
        arr.map(number => number.padStart(2, '0')).join(' ')
      )
      uni.setClipboardData({
        data: copyData.join('\n'),
        success: function () {
          uni.showToast({
            title: '复制成功',
            icon: 'none',
          })
        },
      })
    },
    handlePasteData() {
      let _self = this
      uni.getClipboardData({
        success: function (e) {
          let board = e.data
          try {
            let lines = board.split('\n')
            let arr = lines.map(line => Number(line.split(' ')))
            _self.numberList = arr
            if (Array.isArray(arr) && arr.length > 0) {
              getOmissionAnalysis({
                ..._self.listQuery,
                haoma: JSON.stringify(arr),
              }).then(res => {
                if (res.code === 1 && res.data) {
                  _self.chu = res.data.arrStat.yilou
                  _self.cha = res.data.arrStat.cha
                  _self.cur = res.data.arrStat.cur
                  _self.max = res.data.arrStat.max
                  _self.yilouk = res.data.yilouK
                  _self.yilouC = res.data.yilouC
                  _self.mData = {
                    categories: res.data.yilouC.map(item => `${item.qihao}期`),
                    series: [
                      {
                        name: '',
                        data: res.data.yilouC.map(item => item.quantity),
                      },
                    ],
                  }
                  _self.yilou = res.data.yilou
                } else {
                  uni.showToast({
                    title: res.msg,
                    icon: 'none',
                  })
                }
              })
            } else {
              uni.showToast({
                title: '粘贴数据不合法！',
                icon: 'none',
              })
            }
          } catch (err) {
            console.log(err)
            uni.showToast({
              title: '粘贴数据不合法！',
              icon: 'none',
            })
          }
        },
      })
    },
  },
  onLoad() {
    uni.getStorage({
      key: 'generated',
      success: res => {
        this.numberList = res.data.list
        this.getCateList()
      },
    })
  },
}
</script>

<style lang="scss" scoped>
.app-container {
  width: 100%;
  height: 100vh;
  background-color: rgba(249, 250, 255, 1);

  .generate-numbers-card {
    width: 694upx;
    margin: 28upx;
    padding: 20upx;
    background-color: #ffffff;
    box-shadow: 0 4upx 12upx 0 rgba(12, 124, 202, 0.1);
    border-radius: 20upx;

    .title-row {
      padding-bottom: 22upx;
      border-bottom: 1px solid #edf2f6;
      .tool-left {
        font-size: 32upx;
        font-family: PingFangSC-Medium, PingFang SC;
        font-weight: 500;
        color: #333333;
        line-height: 44upx;
        .tool-left-small {
          font-size: 22upx;
          margin-left: 22upx;
          display: inline-block;
        }
      }
      .tool-right {
        .cu-btn {
          border-radius: 30upx;
        }
      }
    }

    .scroll-h {
      max-height: 360upx;
      .content-row {
        padding: 24upx 0;
        .numbers-container {
          .numbers-item {
            width: 240upx;
            .number-item {
              width: 44upx;
              text-align: center;
              font-size: 32upx;
              font-family: PingFangSC-Medium, PingFang SC;
              font-weight: 500;
              color: #d0021b;
              line-height: 44upx;
            }
          }
        }
      }
      .empty-container {
        height: 100%;
        background-color: #ffffff;
        flex-direction: column;
        padding: 60upx 0;
        .empty {
          width: 250upx;
          height: 230upx;
        }
        .label {
          text-align: center;
          font-size: 28upx;
          font-family: PingFangSC-Regular, PingFang SC;
          font-weight: 400;
          color: #71808a;
          line-height: 40upx;
        }
      }
    }

    .footer-row {
      padding-top: 22upx;
      border-top: 1px solid #edf2f6;

      button {
        width: 180upx;
        height: 60upx;
        background: rgba(237, 242, 246, 1);
        border-radius: 40upx;
        font-family: PingFangSC-Medium, PingFang SC;
        font-weight: 500;
        margin-left: 20upx;
      }
    }
  }

  .number-analysis {
    width: 694upx;
    margin: 28upx;
    padding: 20upx;
    box-shadow: 0upx 4upx 12upx 0upx rgba(12, 124, 202, 0.1);
    border-radius: 20upx;
    background-color: #ffffff;
    .number-analysis-info {
      padding: 20upx 0;
      &-title {
        font-size: 24upx;
        font-family: PingFangSC-Medium, PingFang SC;
        font-weight: bold;
        color: rgba(41, 153, 255, 1);
        &.data-statistics {
          margin-bottom: 12upx;
        }
      }

      &-table {
        display: flex;
        align-items: center;
        margin-bottom: 20upx;
        .table-item {
          width: 120upx;
          display: flex;
          flex-direction: column;
          align-items: center;
          .top {
            font-size: 22upx;
            font-family: PingFangSC-Regular, PingFang SC;
            font-weight: 400;
            color: rgba(51, 51, 51, 1);
            margin-bottom: 20upx;
          }
          .bottom {
            font-size: 28upx;
            font-family: PingFangSC-Medium, PingFang SC;
            font-weight: bold;
            color: rgba(51, 51, 51, 1);
          }
        }
      }
    }
    &-header {
      display: flex;
      flex-direction: row;
      align-items: center;
      justify-content: space-between;
      font-size: 28upx;
      font-family: PingFangSC-Medium, PingFang SC;
      font-weight: bold;
      color: rgba(51, 51, 51, 1);
      padding-bottom: 22upx;
      border-bottom: 2upx solid #edf2f6;
      .desc-container {
        display: flex;
        align-items: center;
        .picker-suffix-icon {
          display: inline-block;
          height: 28upx;
          margin-left: 22upx;
          line-height: 28upx;
          uni-image {
            width: 22upx;
            height: 28upx;
          }
        }
      }
    }
  }
}
</style>
